<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>

    <style>
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }

        @keyframes aaa {
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>


</head>
<body>
    <!-- 双向绑定 --删除 -->
    <div class="box">
        <input type="text" v-model="myContent">
        <!-- add()  加不加小括号都行 -->
        <button @click="add">增加</button>
        <!-- 其他长度了,取反为假了 -->
        <span v-show="!list.length">清空啦</span>
        
        <!-- <ul v-show="list.length"> -->

            <!-- 组,可以放多个节点    下面每一个就是一个组   他自己会实例一个节点,默认是span但是也可以自己修改 tag-->
            <transition-group name="kerwin" tag="ul" v-show="list.length">
                <!-- 如果用index作为key会出现问题,动画效果,一直认为是最后一个有动画 
                一般会用data.id来作为key-->
                <li v-for="(data,index) in list" :key="data">
                    {{data}}
                    <button @click="deletes(index)">删除</button>
                </li>
            </transition-group>
            


        <!-- </ul> -->
    </div>
    <script>
        let mm = new Vue({
            el:'.box',
            data:{
                list:['11','22','33'],
                myContent:''
            },
            methods:{
                add(){
                    // 把input里面的值添加到数组中去
                    this.list.push(this.myContent)
                    this.myContent = ''
                },
                deletes(index){
                    // // 删除数组  从index开始,删除1个
                    this.list.splice(index,1)
                    

                }

            }
        })
    </script>
</body>
</html>